<template>
    <div class="reminder-page">
      <el-card>
        <template #header>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">用药提醒中心</span>
            <el-select v-model="selectedElderlyId" placeholder="选择老人">
              <el-option v-for="elder in elderlyList" :key="elder.id" :label="elder.fullName" :value="elder.id" />
            </el-select>
          </div>
        </template>
  
        <el-descriptions title="老人信息" :column="2" border>
          <el-descriptions-item label="姓名">张三</el-descriptions-item>
          <el-descriptions-item label="年龄">75</el-descriptions-item>
          <el-descriptions-item label="性别">男</el-descriptions-item>
          <el-descriptions-item label="联系方式">13800000000</el-descriptions-item>
        </el-descriptions>
  
        <div class="charts mt-6">
          <v-chart :option="medicineChartOption" class="chart-card" />
          <v-chart :option="frequencyPieOption" class="chart-card" />
          <v-chart :option="costTrendOption" class="chart-card" />
        </div>
  
        <el-divider>用药记录</el-divider>
        <el-table :data="medicineRecords" stripe border>
          <el-table-column prop="drugName" label="药品名称" />
          <el-table-column prop="dosage" label="剂量" />
          <el-table-column prop="frequency" label="频次" />
          <el-table-column prop="startDate" label="开始日期" />
          <el-table-column prop="endDate" label="结束日期" />
        </el-table>
  
        <el-divider>用药提醒</el-divider>
        <el-button type="success">发送用药提醒</el-button>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import VueECharts from 'vue-echarts'
  import 'echarts'
  
  const selectedElderlyId = ref('')
  const elderlyList = ref([
    { id: 1, fullName: '张三' },
    { id: 2, fullName: '李四' }
  ])
  
  const medicineRecords = ref([
    { drugName: '阿司匹林', dosage: '100mg', frequency: '每日一次', startDate: '2025-07-01', endDate: '2025-07-31' },
    { drugName: '洛伐他汀', dosage: '20mg', frequency: '每晚一次', startDate: '2025-07-05', endDate: '2025-08-05' }
  ])
  
  const medicineChartOption = {
    title: { text: '药品种类统计' },
    tooltip: {},
    xAxis: { type: 'category', data: ['阿司匹林', '洛伐他汀'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [1, 1] }]
  }
  
  const frequencyPieOption = {
    title: { text: '用药频次占比', left: 'center' },
    tooltip: { trigger: 'item' },
    series: [{
      name: '频次',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1, name: '每日一次' },
        { value: 1, name: '每晚一次' }
      ]
    }]
  }
  
  const costTrendOption = {
    title: { text: '月度用药总价' },
    tooltip: {},
    xAxis: { type: 'category', data: ['2025-05', '2025-06', '2025-07'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [200, 150, 180] }]
  }
  </script>
  
  <style scoped>
  .reminder-page {
    padding: 20px;
  }
  .charts {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .chart-card {
    width: 32%;
    min-width: 300px;
    height: 300px;
  }
  </style>